<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/bolg_detail.css">
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/1.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 这个标签代表着占位 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <!-- 直接通过a标签的跳转实现向服务器发送请求进行重定向 -->
        <a href="logout">注销</a>
    </div>
     <!-- 中间的主体样式 -->
     <div class="container">
        <!-- 左侧信息 -->
        <div class="container-left">
            <!-- 在这里面写左侧的用户信息 -->
            <div class="card">
                <!-- 用户头像 -->
                <img src="image/3.jpg" alt="">
                <!-- 用户名 -->
                <h3>谢嘉庆</h3>
                <a href="#">github地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 右侧信息 -->
        <div class="container-right">
            <!-- 博客标题 -->
            <h3 class="title"></h3>
            <!-- 博客发布时间 -->
            <div class="date"></div>
            <!-- 博客正文 -->
            <!-- 此处下面正文内容需要使用edito.md进行处理，不能用类选择器，需要改为id选择器 -->
            <div id="content">
            </div>
        </div>
     </div>
     <script src="js/jquery.min.js"></script>
     <!-- 这里的editor的加载必须在jquery之后，因为它依赖了jquery进行运行 -->
     <script src="editor.md/lib/marked.min.js"></script>
     <script src="editor.md/lib/prettify.min.js"></script>
     <script src="editor.md/editormd.js"></script>
     <script>
        $.ajax({
            type:'get',
            // 通过location.search可以获取到当前页面url中的querystring
            url:'blog'+location.search,
            success:function(body){
                //获取到服务器返回的结果后，进行解析放入到页面中
                //更新标题
                let titleDiv=document.querySelector('.container-right .title');
                titleDiv.innerHTML=body.title;
                //更新日期
                let postTimeDiv=document.querySelector('.date');
                postTimeDiv.innerHTML=body.postTime;
                //更新正文内容，注意：我们获取到的是markdown文本处理之前的结果，这里我们需要通过editor.md进过处理，把我们想要看到的页面展示出来
                //这里通过editormd方法的处理可以把markdown文本转化为展示页面的文本，前面的参数是id选择器，后面的参数为转换前的markdown内容
                editormd.markdownToHTML('content',{markdown:body.content});
            }
        });
        //这个函数进行登陆状态的验证，访问页面的时候如果未登陆，就需要强制跳转到登陆页面
        function checkLogin(){
            $.ajax({
                type:'get',
                url:'login',
                success:function(body){
                    if(body.userId&&body.userId>0){
                        //登陆成功
                        console.log('登陆成功');
                    }else{
                        //登陆失败，强制跳转页面
                        //location中自带的函数，用户强制跳转到指定的url
                        location.assign('login.html');
                    }
                }
            });
        }
        checkLogin();
        function getAuthor(){
                $.ajax({
                type:'get',
                // 发送页面的blogid
                url:'author'+location.search,
                success:function(body){
                    let h3=document.querySelector('.container-left .card h3');
                    h3.innerHTML=body.username;
                }
            });
        }
        getAuthor();
     </script>
     
</body>
</html>